<template>
  <page-meta :page-style="$theme.pageStyle"></page-meta>

  <view v-if="theUserInfo">
    <u-empty v-if="theUserInfo.dis_sq_status == 1" :text="emptyText" mode="list" :iconSize="400" :src="`${$domain}/static/icons/public/applying.png`"></u-empty>
    <view v-if="theUserInfo.dis_sq_status != 1" class="body-content">
      <view class="page-tip" v-if="theUserInfo.dis_sq_status == 0">
        <image class="tip-pic" :src="`${$domain}/static/icons/guest/idea.svg`" mode="aspectFit"></image>
        <view class="tip-title">温馨提示</view>
        <view class="tip-text">
          您录入的信息提交后将被平台进行核实
        </view>
      </view>
      <view class="page-tip page-tipErr" v-if="theUserInfo.dis_sq_status == 2">
        <image class="tip-pic" :src="`${$domain}/static/icons/guest/ideaErr.svg`" mode="aspectFit"></image>
        <view class="tip-title">温馨提示</view>
        <view class="tip-text">
          您录入的信息被驳回了，请修改信息
        </view>
      </view>
      <view class="page-form">
        <view class="form-item">
          <view class="item-name">
            手机
          </view>
          <view class="item-right">
            <input v-model="formData.phone" class="right-input" type="text" placeholder="请输入手机号">
          </view>
        </view>
        <view class="form-item">
          <view class="item-name">
            姓名
          </view>
          <view class="item-right">
            <input v-model="formData.name" class="right-input" type="text" placeholder="请输入姓名">
          </view>
        </view>
        <view class="form-item">
          <view class="item-name">
            地址
          </view>
          <view class="item-right" @click="chooseMap">
            <view class="right-tip" v-if="!formData.map">请选择地址</view>
            <view class="right-tip" v-else>{{ formData.map }}</view>
            <u-icon color="#999" name="arrow-right"/>
          </view>
        </view>
        <view class="form-item">
          <view class="item-name">
            微信号
          </view>
          <view class="item-right">
            <input v-model="formData.wx_code" class="right-input" type="text" placeholder="请输入微信号">
          </view>
        </view>
        <view class="form-item" style="align-items: flex-start">
          <view class="item-name">
            微信二维码
          </view>
          <view class="item-right">
            <view class="page-picList">
              <view class="picList-item" v-if="formData.vx_ewm">
                <image mode="aspectFill" class="picList-item" @click="uploadPic" :src="$domain + formData.vx_ewm"></image>
              </view>
              <image mode="aspectFill" v-else class="picList-item" @click="uploadPic" :src="`${$domain}/static/icons/public/uploadPic.svg`"></image>
            </view>
          </view>
        </view>
        <view class="form-item">
          <view class="item-name">
            介绍
          </view>
          <textarea v-model="formData.introduce" class="item-textarea" placeholder="可简单介绍/描述自己（备注）"></textarea>
        </view>
      </view>
      <view class="page-bottom">
        <view class="bottom-btn" @click="submitForm">
          提交
        </view>
      </view>
      <view class="page-bottomFooter"></view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import {reactive, ref} from "vue"
import {onLoad, onPageScroll, onShow} from "@dcloudio/uni-app";

import {applicationHn, getUserInfoApi} from "@/api/new";
import {uploadImage} from "@/api/app";
import {useUserStore} from "@/stores/user";

const emptyText=ref('申请中,请等待后台审核')

const userStore = useUserStore()

const uploadImageIng = async (file: string) => {
  uni.showLoading({
    title: '正在上传中...'
  })
  try {
    const res: any = await uploadImage(file, userStore.temToken!)
    formData.value.vx_ewm = res.url
    uni.hideLoading()
  } catch (error) {
    uni.hideLoading()
    uni.$u.toast(error)
  }
}

const uploadPic = () => {
  uni.chooseImage({
    count: 1,//默认选择1张图片
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    extension: ['png', 'jpeg', 'jpg'], //根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。
    sourceType: ['album'], //从相册选择
    success: function (res) {
      const tempFilePaths = res.tempFilePaths;
      uploadImageIng(tempFilePaths[0])
    }
  });
}


let theUserInfo = ref()

const getTheUserInfo = async () => {
  theUserInfo.value = await getUserInfoApi({})
  console.log('theUserInfo.value.disInfo.wx_code+>>>>>>',theUserInfo.value.disInfo.wx_code,)
  // dis_sq_status 申请状态[0:未申请;1:申请中:2:已驳回;3:已通过]
  if (theUserInfo.value.dis_sq_status == 2) {
    formData.value = {
      name: theUserInfo.value.disInfo.name,
      phone: theUserInfo.value.disInfo.phone,
      map: theUserInfo.value.disInfo.map,
      introduce: theUserInfo.value.disInfo.introduce,
      wx_code: theUserInfo.value.disInfo.wx_code,
      vx_ewm: theUserInfo.value.disInfo.vx_ewm,
    }
  }
  if (theUserInfo.value.dis_sq_status == 3) {
    uni.redirectTo({
      url: '/packagesA/pages/matchmaker/matchmaker'
    })
  }
}

onLoad(() => {
  getTheUserInfo()
})

let formData = ref({
  name: '',
  phone: '',
  map: '',
  introduce: '',
  wx_code: '',
  vx_ewm: '',
}) as any

const submitForm = async () => {
  await applicationHn(formData.value)
  theUserInfo.value.dis_sq_status = 1
}

const chooseMap = () => {
  uni.chooseLocation({
    success: function (res) {
      console.log('位置名称：' + res.name);
      console.log('详细地址：' + res.address);
      console.log('纬度：' + res.latitude);
      console.log('经度：' + res.longitude);
      formData.value.map = res.address
    },
    fail (err) {
      console.log('err',err)
    }
  });
}

</script>

<style>
page {
  background-color: #F0F7FF;
}
</style>

<style scoped lang="scss">
.page-picList {

  .picList-item {
    width: 200rpx;
    height: 200rpx;
    border-radius: 20rpx;
    position: relative;

    .item-close {
      position: absolute;
      right: 0;
      top: 0;
      transform: translate(50%, -50%);
      z-index: 1;
    }
  }
}

.page-tip {
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 24rpx;
  color: #90BBEC;

  .tip-pic {
    width: 30rpx;
    height: 30rpx;
  }

  .tip-title {
    font-size: 28rpx;
    font-weight: bold;
    margin: 0 10rpx;
  }

  &Err {
    color: #ec9e90;
  }
}

.page-form {
  width: calc(100% - 60rpx);
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 0 30rpx;
  .form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 28rpx;
    font-weight: bold;
    color: #111111;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #eeeeee;
    .item-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      max-width: 70%;
      .right-tip {
        color: #999999;
      }
      .right-input {
        background-color: transparent;
        border: none;
        text-align: right;
      }
    }
    .item-textarea {
      width: 100%;
      height: 300rpx;
      margin-top: 20rpx;
    }
  }
}

.page-bottom {
  width: 100%;
  padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom));
  position: fixed;
  bottom: 0;
  z-index: 2;
  .bottom-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-image: linear-gradient(to right, var(--color-primary), var(--color-minor));
    color: #ffffff;
    font-size: 30rpx;
    font-weight: bold;
    border-radius: 40rpx;
  }
  &Footer {
    height: calc(140rpx + env(safe-area-inset-bottom));
  }
}
</style>